import React, { FC, memo } from 'react';
import styles from './svgIcon.module.less';

interface ISvgIconProps {
  symbol: string;
  onClick?: any;
  style?: any;
  size?: number;
  color?: string;
}

const SvgIcon: FC<ISvgIconProps> = (props) => {
  const { size, color } = props;
  const sizeStyle = props.size
    ? {
        width: size + 'px',
        height: size + 'px',
      }
    : {};
  const colorStyle = color
    ? {
        color,
      }
    : {};

  const style = {
    ...sizeStyle,
    ...colorStyle,
  };
  return (
    <svg className={styles.svgIcon} style={style} aria-hidden="true" {...props}>
      <use xlinkHref={`#${props.symbol}`}></use>
    </svg>
  );
};

export default memo(SvgIcon);
